<div class="yby-workflow">
  <div class="yby-workflow-header">
    <nz-page-header nzBackIcon >
      <nz-page-header-title>{{ pageTitle }}</nz-page-header-title>
    </nz-page-header>
    <div class="step-container" *ngIf="showStep">
      <yby-steps
        [steps]="steps"
        [stepsWidth]="stepsWidth"
        [current]="current"
        [startIndex]="startIndex"
        (stepChange)="stepChange.emit($event)"
      ></yby-steps>
    </div>
  </div>
  <div class="yby-workflow-content">
    <ng-content></ng-content>
  </div>
  <div class="yby-workflow-bottom">
    <div class="bottom-item count" *ngIf="showCount">
      {{ countLable }}
      <nz-input-number class="count-input" [(ngModel)]="count" [nzMin]="1" [nzMax]="10" [nzStep]="1"></nz-input-number>
    </div>
    <div class="bottom-center">
      <div class="bottom-item center-left" *ngIf="centerLeftRef">
        <ng-container [ngTemplateOutlet]="centerLeftRef"></ng-container>
      </div>
      <div class="bottom-item center-right" *ngIf="centerRightRef">
        <ng-container [ngTemplateOutlet]="centerRightRef"></ng-container>
      </div>
    </div>
    <div class="bottom-item actions" *ngIf="hasBtns">
      <ng-container *ngFor="let action of buttomAction;">
        <button
          *ngIf="!(action.hidden && action.hidden())"
          nz-button
          [nzType]="action.type || 'default'"
          [disabled]="setDisabled(action)"
          (click)="action.onClick()"
        >{{ action.text }}</button>
      </ng-container>
    </div>
  </div>
</div>